<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // beginPath()对路径的影响, 这里如果不使用beginPath()，绘制的路径默认是在一条线上，在下面设置的描边样式，也会在所有的路径上展示。使用beginPath()相当于新开了一段路径，新设置的描边样式只会作用于当前的路径
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(40, 10);
        ctx.lineTo(80, 10);
        ctx.stroke();
        ctx.moveTo(40, 50);
        ctx.lineTo(80, 50);
        ctx.strokeStyle = "red";
        ctx.stroke();
    }
</script>
</body>
</html>